<template>
  <view class="house-rent-page">
    <image class="rent-banner" src="/static/images/house-banner.jpg" mode="aspectFill"></image>
    <view v-if="role === ''" class="role-select">
      <text class="role-title">请选择您的角色</text>
      <view class="role-btns">
        <button class="role-btn landlord" @click="selectRole('landlord')">房东</button>
        <button class="role-btn tenant" @click="selectRole('tenant')">租户</button>
      </view>
    </view>
    <view v-else>
      <!-- 房东表单 -->
      <view v-if="role === 'landlord'" class="rent-form">
        <view class="form-item">
          <text class="label">您的姓名</text>
          <input class="input" v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view class="form-item">
          <text class="label">联系电话</text>
          <input class="input" v-model="form.phone" type="number" placeholder="请输入联系电话" />
        </view>
        <view class="form-item">
          <text class="label">房屋信息</text>
          <input class="input" v-model="form.info" placeholder="如：两居室，80平米" />
        </view>
        <view class="form-item">
          <text class="label">房屋照片</text>
          <view class="photo-list">
            <view v-for="(img, idx) in form.photos" :key="idx" class="photo-item">
              <image :src="img" class="photo-img"></image>
              <view class="photo-del" @click="removePhoto(idx)">×</view>
            </view>
            <view v-if="form.photos.length < 3" class="photo-upload" @click="choosePhoto">+</view>
          </view>
        </view>
        <view class="form-item">
          <text class="label">备注</text>
          <textarea class="textarea" v-model="form.remark" placeholder="请输入备注" />
        </view>
        <button class="submit-btn" type="primary" @click="submitForm">提交</button>
      </view>
      <!-- 租户表单 -->
      <view v-else-if="role === 'tenant'" class="rent-form">
        <view class="form-item">
          <text class="label">您的姓名</text>
          <input class="input" v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view class="form-item">
          <text class="label">联系电话</text>
          <input class="input" v-model="form.phone" type="number" placeholder="请输入联系电话" />
        </view>
        <view class="form-item">
          <text class="label">房屋类型</text>
          <picker :range="houseTypeOptions" v-model="form.houseTypeIdx">
            <view class="picker-value">{{ houseTypeOptions[form.houseTypeIdx] }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">房屋要求</text>
          <input class="input" v-model="form.requirement" placeholder="请输入房屋要求" />
        </view>
        <view class="form-item">
          <text class="label">备注</text>
          <textarea class="textarea" v-model="form.remark" placeholder="请输入备注" />
        </view>
        <button class="submit-btn" type="primary" @click="submitForm">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      role: '',
      houseTypeOptions: ['一居', '两居', '三居'],
      form: {
        name: '',
        phone: '',
        info: '',
        photos: [],
        remark: '',
        houseTypeIdx: 0,
        requirement: ''
      }
    }
  },
  methods: {
    selectRole(role) {
      this.role = role;
      // 重置表单
      this.form = {
        name: '',
        phone: '',
        info: '',
        photos: [],
        remark: '',
        houseTypeIdx: 0,
        requirement: ''
      };
    },
    choosePhoto() {
      const _this = this;
      uni.chooseImage({
        count: 3 - _this.form.photos.length,
        success(res) {
          _this.form.photos = _this.form.photos.concat(res.tempFilePaths).slice(0, 3);
        }
      });
    },
    removePhoto(idx) {
      this.form.photos.splice(idx, 1);
    },
    submitForm() {
      uni.showToast({ title: '信息已记录', icon: 'success', duration: 1500 });
      setTimeout(() => {
        uni.switchTab({ url: '/pages/index/index' });
      }, 1500);
    }
  }
}
</script>

<style scoped lang="scss">
.house-rent-page {
  background: #fff;
  min-height: 100vh;
}
.rent-banner {
  width: 100%;
  height: 260rpx;
  object-fit: cover;
  border-radius: 0 0 24rpx 24rpx;
  margin-bottom: 20rpx;
}
.role-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
  .role-title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 40rpx;
  }
  .role-btns {
    display: flex;
    gap: 40rpx;
    .role-btn {
      width: 180rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
      color: #fff;
      border: none;
      background: linear-gradient(90deg, #FFB74D 0%, #FF9900 100%);
      box-shadow: 0 4rpx 16rpx rgba(255,153,0,0.08);
    }
    .landlord {
      background: linear-gradient(90deg, #FFD54F 0%, #FF9900 100%);
    }
    .tenant {
      background: linear-gradient(90deg, #FFB74D 0%, #FF6F00 100%);
    }
  }
}
.rent-form {
  padding: 24rpx 32rpx 0 32rpx;
}
.form-item {
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
  .label {
    width: 160rpx;
    font-size: 30rpx;
    color: #333;
    flex-shrink: 0;
  }
  .picker-value, .input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    padding: 16rpx 20rpx;
    background: #fafafa;
  }
  .input {
    height: 44rpx;
  }
  .photo-list {
    display: flex;
    align-items: center;
    .photo-item {
      position: relative;
      margin-right: 16rpx;
      .photo-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 12rpx;
        object-fit: cover;
        border: 1rpx solid #eee;
      }
      .photo-del {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        background: #ff4d4f;
        color: #fff;
        border-radius: 50%;
        width: 32rpx;
        height: 32rpx;
        text-align: center;
        line-height: 32rpx;
        font-size: 28rpx;
        z-index: 2;
        cursor: pointer;
      }
    }
    .photo-upload {
      width: 100rpx;
      height: 100rpx;
      border-radius: 12rpx;
      background: #fff7e6;
      color: #FF9900;
      font-size: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1rpx dashed #FF9900;
      cursor: pointer;
    }
  }
  .textarea {
    flex: 1;
    min-height: 100rpx;
    font-size: 28rpx;
    color: #333;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    padding: 16rpx 20rpx;
    background: #fafafa;
  }
}
.submit-btn {
  width: 100%;
  margin-top: 30rpx;
  background: linear-gradient(90deg, #FFB74D 0%, #FF9900 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,153,0,0.08);
  border: none;
}
</style> 